<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>请假申请页面</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1 class="text-center mt-5">请假申请</h1>
    <form id="leaveForm">
        <div class="form-group">
            <label for="leaveBegin">请假开始日期</label>
            <input type="date" class="form-control" id="leaveBegin" required>
        </div>
        <div class="form-group">
            <label for="leaveEnd">请假结束日期</label>
            <input type="date" class="form-control" id="leaveEnd" required>
        </div>
        <div class="form-group">
            <label for="leaveReason">请假原因</label>
            <textarea class="form-control" id="leaveReason" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-warning">提交请假申请</button>
        <button type="button" onclick="window.location.href='index.html'" class="btn btn-secondary">返回主页</button>
    </form>
</div>

<script>
    $(document).ready(function () {
        const userId = localStorage.getItem('userId');

        checkLeaveStatus(userId);

        // 提交请假申请
        $('#leaveForm').on('submit', function (event) {
            event.preventDefault();
            const leaveBegin = $('#leaveBegin').val();
            const leaveEnd = $('#leaveEnd').val();
            const leaveReason = $('#leaveReason').val();
            const enrollmentData = {
                userId: userId,
                begin: leaveBegin,
                end: leaveEnd,
                reason: leaveReason
            };

            $.ajax({
                url: 'http://localhost:8088/users/leave',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(enrollmentData),
                success: function (response) {
                    alert("请假申请成功！");
                    location.reload(); // 刷新页面
                },
                error: function () {
                    alert('请假申请提交失败，请重试！');
                }
            });
        });

        // 检查请假状态
        function checkLeaveStatus(userId) {
            $.ajax({
                url: `http://localhost:8088/users/leave/${userId}`,
                type: 'GET',
                success: function (response) {
                    if (response.code === 1) {
                        alert('您已有请假记录，无法再次请假！');
                        $('#leaveForm :input').not('.btn-secondary').prop('disabled', true); // 禁用输入，但保留返回按钮可用
                    } else {
                        $('#leaveForm :input').prop('disabled', false); // 启用请假输入
                    }
                },
                error: function () {
                    alert('检查请假状态失败，请重试！');
                }
            });
        }

        // 验证结束日期不能早于开始日期
        $('#leaveEnd').on('change', function () {
            const leaveBegin = $('#leaveBegin').val();
            const leaveEnd = $(this).val();

            if (leaveBegin && leaveEnd && new Date(leaveEnd) < new Date(leaveBegin)) {
                alert("请假结束日期不能早于请假开始日期！");
                $('#leaveEnd').val(''); // 清空结束日期
            }
        });
    });
</script>
</body>
</html>
